<template>
  <div>
    <StoreChoice
      ref="StoreChoice"
      :isReset="isReset"
      :current="store"
      :multipleChoice="false"
      @listenToStoreSelect="getSelectStoreValue"
      :statusFilter="false"
      :hasTotal="true"
    />
    <mt-popup v-model="popupVisible" position="right" :modal="false" class="fxActivityRecord-filterItem">
      <div class="scroll-view">
        <customHeader middleTitle="筛选" @leftCallBack="back"/>
        <div class="page-body" v-if="scrollShow">
          <div class="section">
            <div class="title">交易时间</div>
            <div class="picker-val" @click="startPicker">
              <span>{{formateStartDate}} ～ {{formateEndDate}}</span>
              <i class="zhk-activity_rl"></i>
            </div>
          </div>
          <div class="section">
            <div class="title">门店范围</div>
            <div class="picker-val" @click="handleClickSelectStore">
              <span>{{formateStore}}</span>
              <i v-if="this.roleInfo.manyShopFlag" class="zhk-list_rarrow"></i>
            </div>
          </div>
          <div class="section has-right">
            <div class="title">支付方式</div>
            <ul class="check-list">
              <li
                class="item"
                :class="{checked:item.checked}"
                v-for="(item,index) in payTypeList"
                :key="index"
                @click="handleListCheck(item,'payTypeList')"
              >
                {{ item.label }}
                <i class="zhk-detail_select"></i>
              </li>
            </ul>
          </div>
          <div class="section has-right" v-if="JSON.stringify(pageType)== '[3]'">
            <div class="title">结算状态</div>
            <ul class="check-list">
              <li
                class="item"
                :class="{checked:item.checked}"
                v-for="(item,index) in settlementTypeList"
                :key="index"
                @click="handleListCheck(item,'settlementTypeList')"
              >
                {{ item.label }}
                <i class="zhk-detail_select"></i>
              </li>
            </ul>
          </div>
          <div class="section has-right" v-if="JSON.stringify(pageType)== '[7,9]'">
            <div class="title">服务费类型</div>
            <ul class="check-list">
              <li
                class="item"
                :class="{checked:item.checked}"
                v-for="(item,index) in orderTypeList"
                :key="index"
                @click="handleListCheck(item,'orderTypeList')"
              >
                {{ item.label }}
                <i class="zhk-detail_select"></i>
              </li>
            </ul>
          </div>


        </div>
        <div class="btn-wrap">
          <div @click="reset">重置</div>
          <div @click="sure">确定</div>
        </div>
      </div>
    </mt-popup>
        <mt-datetime-picker v-if="startPickerVisible"
      ref="startPicker"
      class="date-timer-picker"
      type="dateTime"
      v-model="startDate"
      year-format="{value}年"
      month-format="{value}月"
      date-format="{value}日"
      hour-format="{value}时"
      minute-format="{value}分"
      confirmText="下一步"
      @confirm="endPicker"
      @cancel="cancelPicker"
      :startDate="startDateScope"
      :endDate="endDateScope"
    ></mt-datetime-picker>
    <mt-datetime-picker v-if="endPickerVisible"
      ref="endPicker"
      type="dateTime"
      class="date-timer-picker"
      v-model="endDate"
      year-format="{value}年"
      month-format="{value}月"
      date-format="{value}日"
      hour-format="{value}时"
      minute-format="{value}分"
      :startDate="startDateScope2"
      :endDate="endDateScope"
      @confirm="dateChoice"
      @cancel="cancelPicker"
    ></mt-datetime-picker>
  </div>
</template>

<script>
import Vue from "vue";
import { DatetimePicker, Popup, Toast } from "mint-ui";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
import customHeader from "../../components/header/header";
import AwesomePicker from "vue-awesome-picker";
import moment from "moment";
Vue.component(DatetimePicker.name, DatetimePicker);
Vue.use(AwesomePicker);
Vue.component(Popup.name, Popup);
export default {
  name: "filterItem",
  data() {
    return {
      isReset: true, //门店重置
      startDate: "开始日期",
      startPickerVisible:false,
      endDate: "结束日期",
      endPickerVisible:false,
      sbak: null, //用于点取消还原之前的值
      ebak: null, //用于点取消还原之前的值
      startDateScope: null, //可选开始日期范围
      startDateScope2: null, //可选结束日期范围
      endDateScope: null,
      popupVisible: false,
      scrollShow:false,
      payTypeList: [
        { label: "支付宝", value: "2", checked: false },
        { label: "微信", value: "5", checked: false },
      ],
      settlementTypeList: [
        { label: "未结算", value: "0", checked: false },
        { label: "已结算", value: "1", checked: false },
      ],
      orderTypeList: [
        { label: "软件服务费", value: "9", checked: false },
        { label: "营销服务费", value: "7", checked: false },
      ],
      store: [{ selectKey: "all", selectName: "全部门店" }],
      filterBak: {
        store: [],
        payTypeList: "",
        settlementTypeList: "",
        orderTypeList:"",
      }
    };
  },
  components: {
    customHeader,
    StoreChoice
  },
  computed: {
    formateStartDate() {
      if (typeof this.startDate == "object") {
        return moment(this.startDate).format("YYYY-MM-DD HH:mm");
      } else {
        return this.startDate;
      }
    },
    formateEndDate() {
      if (typeof this.endDate == "object") {
        return moment(this.endDate).format("YYYY-MM-DD HH:mm");
      } else {
        return this.endDate;
      }
    },
    formateStore() {
      let val = "";
      if (this.roleInfo.manyShopFlag!==undefined&&!this.roleInfo.manyShopFlag) {
        this.store = [
          {
            selectName: this.roleInfo.shopName,
            selectKey: this.roleInfo.yzShopId
          }
        ];
        val = this.roleInfo.shopName;
      } else if (this.store[0]) {
        val = this.store[0].selectName;
      }
      return val;
    }
  },
  props: {
    defaultStartDate: {
      type: Date
    },
    defaultEndDate: {
      type: Date
    },
    roleInfo: {
      type: Object
    },
    pageType: {
      type: Array
    }
  },
  methods: {
    //设置默认日期
    setDefaultDate() {
      if (this.defaultStartDate) {
        this.startDate = this.defaultStartDate;
        this.endDate = this.defaultEndDate;
        this.startDateScope = new Date("2019/4/10");
        this.endDateScope = new Date();
        this.startDateScope2 = new Date();
      } else {
        this.startDateScope = new Date("2019/4/10");
        this.endDateScope = new Date();
        this.startDateScope2 = new Date();
      }
    },
    //日期选择展开
    startPicker() {
      this.startPickerVisible = true;
      this.endPickerVisible=true;
      this.sbak = this.startDate;
      this.ebak = this.endDate;
      this.endDateScope = new Date();
      this.$nextTick(()=>{
        this.$refs.startPicker.open();
      });
    },
    //结束日期展开
    endPicker(e) {
      this.startDateScope2 = e;

      //日期选择范围为31天且不超过当前时间
      if (new Date().valueOf() - e.valueOf() > 31 * 24 * 3600 * 1000) {
        this.endDateScope = new Date(e.valueOf() + 31 * 24 * 3600 * 1000);
      } else {
        this.endDateScope = new Date();
      }

      this.$nextTick(()=>{
        this.$refs.endPicker.open();
      });
    },
    //结束日期选择
    dateChoice(e) {
      this.sbak = this.startDate;
      this.ebak = this.endDate;
      this.startPickerVisible = false;
      this.endPickerVisible = false;
    },
    //点取消关闭日期组件
    cancelPicker() {
      this.startPickerVisible = false;
      this.endPickerVisible = false;
      this.startDate = this.sbak;
      this.endDate = this.ebak;
    },
    //门店选择回调
    getSelectStoreValue(value, storeName) {
      this.store = value;
    },
    //打开门店选择
    handleClickSelectStore() {
      if (this.roleInfo.manyShopFlag!==undefined&&!this.roleInfo.manyShopFlag) {
        return;
      }
      this.$refs.StoreChoice.popupShow();
    },
    handleListCheck(item, dataItem) {
      this[dataItem].forEach(function(currentValue, index, arr) {
        if (item.value === currentValue.value) {
          currentValue.checked = !currentValue.checked;
        } else {
          currentValue.checked = false;
        }
      });
    },
    popupShow() {
      this.popupVisible = true;
    },
    //深拷贝
    deepCopy(v) {
      if (v) {
        return JSON.parse(JSON.stringify(v));
      } else {
        return v;
      }
    },
    filterSure() {
      this.popupVisible = false;
      const selectObj = {
        store: this.store,
        startDate: this.startDate.valueOf(),
        endDate: this.endDate.valueOf(),
        payTypeList: this.payTypeList.filter(item => {
          return item.checked === true;
        }),
        settlementTypeList: this.settlementTypeList.filter(item => {
          return item.checked === true;
        }),
        orderTypeList: this.orderTypeList.filter(item => {
          return item.checked === true;
        }),
      };
      this.$emit("filterChoice", selectObj);

      //备份（如果筛选项改变后没有点击确定而点了返回，则用备份数据还原所选）
      this.$nextTick(()=>{
        this.filterBak.store = this.deepCopy(this.store);
        this.filterBak.startDate = this.deepCopy(this.startDate);
        this.filterBak.endDate = this.deepCopy(this.endDate);
        this.filterBak.payTypeList = this.deepCopy(this.payTypeList);
        this.filterBak.settlementTypeList = this.deepCopy(this.settlementTypeList);
        this.filterBak.orderTypeList = this.deepCopy(this.orderTypeList);
      });
    },

    //返回
    back() {
       this.$refs.startPicker&&this.$refs.startPicker.close();
       this.$refs.endPicker&&this.$refs.endPicker.close();

      //还原备份（如果筛选项改变后没有点击确定而点了返回，则用备份数据还原所选）
      try {
        if (this.filterBak.startDate) {
          this.startDate = new Date(this.deepCopy(this.filterBak.startDate));
        }
        if (this.filterBak.endDate) {
          this.endDate = new Date(this.deepCopy(this.filterBak.endDate));
        }
        if (this.filterBak.payTypeList) {
          this.payTypeList = this.deepCopy(this.filterBak.payTypeList);
        }
        if (this.filterBak.settlementTypeList) {
          this.settlementTypeList = this.deepCopy(this.filterBak.settlementTypeList);
        }
        if (this.filterBak.orderTypeList) {
          this.orderTypeList = this.deepCopy(this.filterBak.orderTypeList);
        }
        if (this.filterBak.store.length > 0) {
          this.store = this.deepCopy(this.filterBak.store);
        } else {
          this.isReset = new Date();
        }
      } catch (error) {

      }

      this.popupVisible = false;
    },

    //重置
    reset() {
      this.setDefaultDate();
      this.isReset = new Date();
      this.payTypeList.forEach(v => {
        v.checked = false;
      });
      this.settlementTypeList.forEach(v => {
        v.checked = false;
      });
      this.orderTypeList.forEach(v => {
        v.checked = false;
      });
      if (this.roleInfo.manyShopFlag) {
        this.store = [{ selectKey: "all", selectName: "全部门店" }];
      }
    },
    //确定
    sure() {
      if (this.startDate == null) {
        Toast("请选择开始时间！");
        return;
      }
      if (this.endDate == null) {
        Toast("请选择结束时间！");
        return;
      }
      this.filterSure();
    }
  },
  watch: {
    popupVisible(val){
      if(val){
        setTimeout(() => {
          this.scrollShow = true;
        }, 100);
      }
    },
  },
  mounted(){
    this.setDefaultDate();
  }
};
</script>

<style lang="scss" scoped>
@import "fxActivityRecord";
</style>
<style lang="scss" >
.date-timer-picker {
  .picker-slot {
    font-size: 0.76rem;
  }
}
.pickerZindex{
 .mask{
  background: rgba(0,0,0,.5) !important;
 }
}
</style>
